<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/assets/js/echarts.min.js"></script>
</head>
<body>
   <div id="main" style="height: 600px; width: 800px;"></div>
  <script>
      var chartDom = document.getElementById('main');
      chartDom.innerHTML = `
        {% for data in xizang %}

             <p>{{ data[6] }}</p>
             <p>{{ data[4] }}</p>
        {% endfor %}
      `
      var oP = document.querySelectorAll('p');

      var arr = [];
      for(var i = 0; i < oP.length; i++){
          arr.push([parseInt(oP[i].innerText),parseInt(oP[i+1].innerText)]);
          i += 1;
      }
      console.log(arr);

      var max = [[892, 92]]
      var myChart = echarts.init(chartDom);
      var option;

      option = {
      xAxis: {
        scale: true
      },
      yAxis: {
        scale: true
      },
      tooltip:{
          trigger:'item',
          formatter: "{a} <br/> {b} : {c}"
      }  ,

      series: [
        {
          name: '西藏',
          type: 'effectScatter',
          symbolSize: 20,
          data: max
        },
        {

          name: 'faafds',
          type: 'scatter',
          // prettier-ignore
          data: arr
        }
      ]
    };

      option && myChart.setOption(option);

    </script>